<template>
  <out-line
    :position="position"
    :id="element.id"
    class="person-info"
    :padding="0"
    :width="500"
    :height="0"
    @closeLayer="closeLayer"
  >
    <div class="info">
      <Title title="园区信息">
        <div class="title-right" @click="goAnalysisData">数据分析</div>
      </Title>
      <nav-title leftTitle="基本信息" @goMore="goMore"></nav-title>
      <div class="grid">
        <div class="item box">
          <Info labelWidth="114" label="园区名称" :value="element.parkName" />
        </div>
        <div class="item item-right">
          <Info labelWidth="114" label="环保负责部门" :value="element.epDepart" />
        </div>
        <div class="item">
          <Info labelWidth="114" label="环保负责人" :value="element.epPerson" />
        </div>
        <div class="item">
          <Info labelWidth="114" label="联系电话" :value="element.phone" />
        </div>
        <div class="item">
          <Info labelWidth="114" label="园区级别" :value="element.parkLevel_dictText" />
        </div>
        <div class="item box">
          <div class="no-box">园区数量统计</div>
        </div>
        <div class="item">
          <div class="no-box">省重点{{ element.provincialKey }}家</div>
        </div>
        <div class="item">
          <div class="no-box">市重点{{ element.cityKey }}家</div>
        </div>
        <div class="item">
          <div class="no-box">县重点{{ element.countyKey }}家</div>
        </div>
        <div class="item">
          <div class="no-box">其他{{ element.other }}家</div>
        </div>
        <div class="item border box">
          <Info labelWidth="114" label="企业地址" :value="element.address" />
        </div>
      </div>
      <div class="content">
        <a-tabs default-active-key="1" :tabBarGutter="0">
          <a-tab-pane key="1" tab="企业列表">
            <Table
              :hide="false"
              :data="enterpriseData"
              :columns="enterpriseColumns"
              :pagination="enterprisePagination"
              style="margin: 0 10px"
              @change="enterpriseChange"
              @goMore="goTableMore('enterpriseList')"
            >
              <template slot="action" slot-scope="text">
                <span class="btns" @click="showDlayer(text)"
                  ><img class="detail-image" :src="require('@assets/gis/detail.svg')"
                /></span>
              </template>
            </Table>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </out-line>
</template>
<script>
  import Title from '@comp/gis/title'
  import OutLine from '@comp/gis/outline'
  import navTitle from '@comp/gis/navTitle'
  import Info from '@comp/gis/info'
  import Table from '@comp/gis/table'
  import {mapActions, mapState} from 'vuex'
  import {url} from '@views/gis/jumpUrl'

  import {pageEpList} from '@/api/gis'

  export default {
  components: {
    Title,
    OutLine,
    navTitle,
    Info,
    Table,
  },
  props: {
    element: {
      type: Object,
      default: () => {},
    },
    position: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      enterpriseData: [], //日常核查
      enterpriseColumns: [
        {
          title: '企业名称',
          dataIndex: 'enterpriseName',
          key: 'enterpriseName',
        },
        {
          title: '法定代表人',
          dataIndex: 'representative',
          key: 'representative',
        },
        {
          title: '环保负责人',
          dataIndex: 'epOfficer',
          key: 'epOfficer',
        },
        {
          title: '行业类别',
          dataIndex: 'industryType',
          key: 'industryType',
        },
        {
          title: '环保管理类别',
          dataIndex: 'epType_dictText',
          key: 'epType_dictText',
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      enterprisePagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 5,
      },
    }
  },
  computed: {
    ...mapState(['fposition']),
  },
  methods: {
    ...mapActions(['deleteLayers', 'addDLayers','setZIndex']),
    //数据分析图层展示
    goAnalysisData() {
      let obj = {
        data: this.element,
        name: 'analysisData',
        position: {
          top: this.fposition.top + 'px',
          left: this.fposition.left + 'px',
        },
        key: `analysisData---${this.element.id}`,
      }
      this.addDLayers(obj)
    },
    goMore() {
      url.park(this.element.id)
    },
    //表格更多跳转
    goTableMore(name) {
      url[name]()
    },
    //关闭图层
    closeLayer() {
      console.log("删除的数据id======",this.element.id);
      this.deleteLayers(this.element.id)
    },
    //日常核查
    pageEpList() {
      const params = {
        parkId: this.element.id,
        pageNo: this.enterprisePagination.pageIndex,
        pageSize: this.enterprisePagination.pageSize,
      }
      pageEpList(params).then((res) => {
        if (res.success) {
          const _data = res.result
          this.enterprisePagination.total = _data.total || 0
          this.enterpriseData = _data.records
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //分页
    enterpriseChange(val) {
      this.enterprisePagination.pageIndex = val
      this.pageEpList()
    },
    //展示d区图层
    showDlayer(record) {
      const _data = record.text
      //展示c区图层数据
      this.$emit('onSelectLayer', {
        name: 'enterprise',
        key: _data.id,
        value: _data.id,
      })
    },
  },
  mounted() {
    //初始化数据
    this.pageEpList()
  },
}
</script>
<style lang="less" scoped>
.info {
  padding-top: 12px;
  .title-right{
    margin-right: 10px;
    text-decoration: underline;
    cursor: pointer;
  }
  .grid {
    margin: 9px 21px;
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 50%;
      border: 1px solid rgba(2, 224, 247, 0.5);
      border-bottom: none;
    }
    .box {
      width: 100%;
    }
    .border {
      border-top: none;
    }
    .item-right {
      border-right: none;
    }
    .no-box {
      width: 100%;
      text-align: center;
      color: #fff;
      border-bottom: 1px solid rgba(2, 224, 247, 0.5);
    }
  }
  .content {
    margin: 0 10px 20px;
  }
  .btns {
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .detail-image {
    width: 16px;
    height: 16px;
    display: block;
    cursor: pointer;
  }
}
</style>